<! html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<!--
  jQuery library
-->
<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>

<!--
  jCarousel library
-->
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>

<!--
  jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />

<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />

<style type="text/css">
			<!--
			.loading {
			      position:relative;
			      left: 5px;
			      top: -54px;
			      display: none;
			}
			-->
		}
		</style>
		
<script type="text/javascript">

var photoUpload = wrt.getPlugin('photoapi');
photoUpload.uploadReady.connect(uploadReady);
photoUpload.reload.connect(reload);

function upload(photoDiv, photo)
{
	$("#"+photoDiv).show();
	photoUpload.uploadPhoto(photo);
}

function uploadReady()
{
	$(".loading").hide();
}

function reload()
{
	window.location.reload();
}

			
function mycarousel_itemLoadCallback(carousel, state)
{
    // Since we get all URLs in one file, we simply add all items
    // at once and set the size accordingly.
    if (state != 'init')
        return;

		items = photoUpload.getAvailablePhotos();
		
		var j=items.length;
		
		if(j>10)
			j=10;
		
    for (i=0; i<j; i++ ) {
   	  carousel.add(i, mycarousel_getItemHTML(items[i],i));
    }

    carousel.size(items.length);
};

function mycarousel_itemAddCallback(carousel, first, last, data)
{
   
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(imgUrl,i)
{
    return '<div id="photo'+i+'"><img onClick="javascript: upload(\'loading'+i+'\',\'' + imgUrl + '\')" src="'+imgUrl+'" height="120px" /><div id="loading'+i+'" class="loading"><img src="ajax-loader.gif"></div></div><br>';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        itemLoadCallback: mycarousel_itemLoadCallback,
        vertical: true,
        visible: 2
    });
});

</script>
</head>
<body>
<div id="wrap" bgcolor="#000000">
  <h1>TwitPic Uploader</h1>
  <h2>Riding carousels with jQuery</h2>

	<center>
  <div id="mycarousel" class="jcarousel-skin-tango">
    <ul>
      <!-- The content will be dynamically loaded in here -->
    </ul>
  </div>
  
	</center>

</div>

<div id="log"></div>
</body>
</html>
